<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- <view class="header-bag">
			<image src="/static/icon-close.png" class="back" @click="goBack"></image>
			<view class="header-center">
				<text class="header-title">详情</text>
			</view>
		</view> -->
		
		<!-- 内容区域 -->
		<scroll-view 
			class="wrapper" 
			scroll-y="true" 
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<!-- 视频区域 -->
			<view class="video-container" v-if="courseData.video_url">
				<web-view :src="courseData.video_url" class="video-frame"></web-view>
			</view>
			
			<!-- 内容区域 -->
			<view class="content-area" :class="{'no-video': !courseData.video_url}">
				<rich-text :nodes="processedContent"></rich-text>
			</view>
			
			<!-- 加载更多提示 -->
		<!-- 	<view class="load-more" v-if="hasMore">
				<text class="load-text">上拉加载...</text>
			</view>
			
			<view class="load-more" v-if="!hasMore && currentPage > 1">
				<text class="load-text">已经是最后一页了！</text>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
	import { forumApi } from '@/api/index.js'
	import request from '@/api/request.js'
	
	export default {
		data() {
			return {
				courseId: '',
				currentPage: 1,
				courseData: {
					video_url: '',
					content: ''
				},
				processedContent: '',
				hasMore: true,
				refreshing: false,
				loading: false
			}
		},
		
		onLoad(options) {
			this.courseId = options.id || ''
			this.loadCourseData()
		},
		
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			
			// 加载课程数据
			async loadCourseData(page = 1) {
				if (this.loading) return
				this.loading = true
				
				try {
					const response = await forumApi.getForumContent({
						course_id: this.courseId,
						page: page
					})
					
					if (response.r === 0) {
						const data = response.data
						
						if (page === 1) {
							// 首次加载
							this.courseData = {
								video_url: data.video_url || '',
								content: data.content || ''
							}
							this.processedContent = this.processContent(data.content)
						} else {
							// 加载更多
							if (page > data.page_count) {
								this.hasMore = false
								uni.showToast({
									title: '已经是最后一页了！',
									icon: 'none'
								})
							} else {
								this.courseData.content += data.content
								this.processedContent = this.processContent(this.courseData.content)
							}
						}
						
						this.currentPage = page
					} else {
						uni.showToast({
							title: response.msg || '加载失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载课程数据失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				} finally {
					this.loading = false
					this.refreshing = false
				}
			},
			
			// 处理内容中的图片路径
			processContent(content) {
				if (!content) return ''
				
				// 处理相对路径的图片
				const imgBaseUrl = request.defaults.imgurl || 'http://static.youpin91.com/'
				return content.replace(/<img([^>]*?)src="([^"]*?)"([^>]*?)>/g, (match, before, src, after) => {
					if (src.indexOf('http') === -1) {
						src = imgBaseUrl + src
					}
					return `<img${before}src="${src}"${after} style="width:100%;height:auto;">`
				})
			},
			
			// 下拉刷新
			onRefresh() {
				this.refreshing = true
				this.currentPage = 1
				this.hasMore = true
				this.loadCourseData(1)
			},
			
			// 上拉加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.loadCourseData(this.currentPage + 1)
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		background-color: #f5f5f5;
	}
	
	.header-bag {
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		position: relative;
	}
	
	.back {
		width: 40rpx;
		height: 40rpx;
		margin-left: 30rpx;
	}
	
	.header-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.header-title {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}
	
	.wrapper {
		height: calc(100vh - 88rpx);
	}
	
	.video-container {
		width: 100%;
		height: 420rpx;
		background-color: #000;
	}
	
	.video-frame {
		width: 100%;
		height: 100%;
	}
	
	.content-area {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		line-height: 1.6;
	}
	
	.content-area.no-video {
		margin-top: 0;
	}
	
	.load-more {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}
	
	.load-text {
		font-size: 28rpx;
		color: #999;
	}
	
	/* 富文本内容样式 */
	/deep/ .content-area img {
		width: 100% !important;
		height: auto !important;
		display: block;
		margin: 20rpx 0;
	}
	
	/deep/ .content-area p {
		margin: 20rpx 0;
		font-size: 30rpx;
		color: #333;
		line-height: 1.6;
	}
</style>